<template>
  <view class="detail-page">
  

    <!-- 顶部用户信息栏 -->
    <view class="header-bar">
      <view class="back-btn" @tap="goBack">
        <uv-icon name="arrow-left" color="#fff" size="20"></uv-icon>
      </view>
      <view class="user-info">
        <image class="user-avatar" :src="post.avatar" mode="aspectFill"></image>
        <view class="user-details">
          <text class="username">{{ post.username }}</text>
          <text class="post-meta">{{ post.time }}·{{ post.category }}</text>
        </view>
      </view>
    </view>

    <!-- 帖子内容区域 -->
    <scroll-view class="content-area" scroll-y="true">
      <!-- 帖子正文 -->
      <view class="post-content">
        <text class="post-text">{{ post.content }}</text>
        <text class="post-text">{{ post.currentAnswer }}</text>
        <text class="post-text">{{ post.helpRequest }}</text>
        
        <!-- 帖子图片 -->
        <view class="post-image-container" v-for="image in post.images" :key="image">
          <image-preview 
            :imageUrl="image" 
            :imageList="post.images"
            @click="handleImageClick"
          />
        </view>
      </view>

      <!-- 互动统计 -->
      <view class="interaction-stats">
        <text class="stat-item">点赞 {{ post.likes }}</text>
        <text class="stat-item">收藏 {{ post.collections }}</text>
        <text class="stat-item">转发 {{ post.shares }}</text>
      </view>

      <!-- 评论区域 -->
      <view class="comments-section">
        <view class="comments-header">
          <text class="comments-title">评论 ({{ post.comments.length }})</text>
        </view>

        <!-- 评论列表 -->
        <view class="comments-list">
          <view class="comment-item" v-for="comment in post.comments" :key="comment.id">
            <!-- 主评论 -->
            <view class="comment-main">
              <image class="comment-avatar" :src="comment.avatar" mode="aspectFill"></image>
              <view class="comment-content">
                <view class="comment-header">
                  <text class="comment-username">{{ comment.username }}</text>
                  <text class="comment-time">{{ comment.time }}</text>
                </view>
                <text class="comment-text">{{ comment.content }}</text>
                <view class="comment-actions">
                  <text class="action-btn" @tap="handleReply(comment)">回复</text>
                  <text class="action-btn">点赞 {{ comment.likes }}</text>
                </view>
              </view>
            </view>

            <!-- 回复列表 -->
            <view class="replies-list" v-if="comment.replies && comment.replies.length > 0">
              <view class="reply-item" v-for="reply in comment.replies" :key="reply.id">
                <view class="reply-content">
                 <text class="reply-username original-poster" v-if="reply.isOriginalPoster">
                  {{ reply.username }}</text>
                  <text class="reply-username" v-else>
                    {{ reply.username }}</text>
                  <text class="reply-text">{{ reply.content }}</text> 
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部评论输入栏 -->
    <view class="comment-input-bar">
      <view class="input-container">
        <input 
          class="comment-input" 
          v-model="commentText" 
          placeholder="写下你的评论..." 
          placeholder-class="input-placeholder"
        />
        <view class="publish-btn" @tap="publishComment">
          <text class="publish-text">发布</text>
        </view>
      </view>
    </view>

    <!-- 底部交互栏 -->
    <view class="bottom-actions">
      <view class="action-item" @tap="handleLike">
        <uv-icon name="heart" :color="isLiked ? '#ff4757' : '#666'" size="24"></uv-icon>
        <text class="action-text">点赞</text>
      </view>
      <view class="action-item" @tap="handleComment">
        <uv-icon name="chat" color="#666" size="24"></uv-icon>
        <text class="action-text">评论</text>
      </view>
      <view class="action-item" @tap="handleCollect">
        <uv-icon name="star" :color="isCollected ? '#ffa502' : '#666'" size="24"></uv-icon>
        <text class="action-text">收藏</text>
      </view>
      <view class="action-item" @tap="handleShare">
        <uv-icon name="share" color="#666" size="24"></uv-icon>
        <text class="action-text">分享</text>
      </view>
    </view>
  </view>
</template>

<script>
import ImagePreview from '@/components/zoe-picPreview/image-preview/index.vue'

export default {
  components: {
    ImagePreview
  },
  data() {
    return {
      isLiked: false,
      isCollected: false,
      commentText: '',
      post: {
        id: 1,
        username: '职场达人',
        avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
        time: '2小时前',
        category: '职场面试',
        content: '今天面试遇到一个棘手问题:"你最大的缺点是什么?"大家有什么好的回答策略吗?',
        currentAnswer: '我目前的回答是:"我有时会过于追求完美,导致在细节上花费过多时间。但我已经意识到这个问题,现在会使用时间管理工具来确保高效完成工作。"',
        helpRequest: '面试官似乎不太满意,求各位大神支招!',
        image: 'https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60',
        images: [
          'https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60',
          'https://images.unsplash.com/photo-1556761175-b413da4baf72?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60',
          'https://images.unsplash.com/photo-1589391886645-d51941baf7fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60'
        ],
        likes: 128,
        collections: 56,
        shares: 12,
        comments: [
          {
            id: 1,
            username: 'HR张老师',
            avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
            time: '1小时前',
            content: '建议从自我认知的角度回答,用具体例子说明如何克服缺点。比如:"我过去不擅长公开演讲,但通过参加Toastmasters俱乐部,现在已能自信地进行团队演示。"',
            likes: 24,
            replies: [
              {
                id: 11,
                username: '楼主',
                content: '非常感谢!这个建议很实用,我会尝试用这个思路重新组织答案。',
                isOriginalPoster: true
              },
              {
                id: 12,
                username: '求职者小王',
                content: '张老师说得对,我也遇到过类似问题,用具体事例回答效果确实更好。',
                isOriginalPoster: false
              }
            ]
          },
          {
            id: 2,
            username: '求职小助手',
            avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
            time: '45分钟前',
            content: '避免使用"追求完美"这种老套答案。可以这样说:"我有时会急于完成任务,导致需要返工。现在我会在提交前预留时间做最后检查,确保工作质量。"',
            likes: 18,
            replies: []
          }
        ]
      }
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    handleLike() {
      this.isLiked = !this.isLiked
      if (this.isLiked) {
        this.post.likes++
      } else {
        this.post.likes--
      }
    },
    handleComment() {
      // 聚焦到评论输入框
      this.$nextTick(() => {
        const input = this.$el.querySelector('.comment-input')
        if (input) {
          input.focus()
        }
      })
    },
    handleCollect() {
      this.isCollected = !this.isCollected
      if (this.isCollected) {
        this.post.collections++
      } else {
        this.post.collections--
      }
      uni.showToast({
        title: this.isCollected ? '已收藏' : '取消收藏',
        icon: 'none'
      })
    },
    handleShare() {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      })
    },
    handleImageClick() {
      // 图片点击事件处理
      console.log('详情页面图片被点击')
    },
    handleReply(comment) {
      this.commentText = `回复 @${comment.username}: `
      this.$nextTick(() => {
        const input = this.$el.querySelector('.comment-input')
        if (input) {
          input.focus()
        }
      })
    },
    publishComment() {
      if (!this.commentText.trim()) {
        uni.showToast({
          title: '请输入评论内容',
          icon: 'none'
        })
        return
      }

      // 添加新评论
      const newComment = {
        id: Date.now(),
        username: '我',
        avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
        time: '刚刚',
        content: this.commentText,
        likes: 0,
        replies: []
      }

      this.post.comments.unshift(newComment)
      this.commentText = ''

      uni.showToast({
        title: '评论发布成功',
        icon: 'success'
      })
    }
  },
  onLoad(options) {
    // 可以从options中获取帖子ID，然后加载对应的帖子数据
    console.log('加载帖子详情:', options)
  }
}
</script>

<style lang="scss" scoped>
.detail-page {
  min-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.status-bar {
  background: #4ECDC4;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20rpx;
}

.status-text {
  color: #fff;
  font-size: 24rpx;
}

.header-bar {
  background: #4ECDC4;
  padding: 20rpx;
  display: flex;
  align-items: center;
  position: relative;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.user-info {
  display: flex;
  align-items: center;
  flex: 1;
}

.user-avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.user-details {
  flex: 1;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 4rpx;
}

.post-meta {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.8);
}

.content-area {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
  margin-bottom: 130rpx;
}

.post-content {
  margin-bottom: 30rpx;
}

.post-text {
  font-size: 28rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 16rpx;
  display: block;
}

.post-image-container {
  margin-top: 20rpx;
}

.post-image-container {
  margin-top: 20rpx;
}

.post-image-container  {
  width: 100%;
  height: 400rpx;
  border-radius: 12rpx;
}

.interaction-stats {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  margin-bottom: 20rpx;
}

.stat-item {
  font-size: 26rpx;
  color: #666;
}

.comments-section {
  margin-bottom: 120rpx;
}

.comments-header {
  margin-bottom: 20rpx;
}

.comments-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.comment-item {
  display: flex;
  flex-direction: column;
}

.comment-main {
  display: flex;
  gap: 16rpx;
}

.comment-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.comment-username {
  font-size: 26rpx;
  font-weight: bold;
  color: #333;
}

.comment-time {
  font-size: 22rpx;
  color: #999;
}

.comment-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 12rpx;
  display: block;
}

.comment-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  font-size: 22rpx;
  color: #666;
}

.replies-list {
  margin-left: 76rpx;
  margin-top: 12rpx;
  padding-left: 16rpx;
  border-left: 2rpx solid #f0f0f0;
}

.reply-item {
  margin-bottom: 12rpx;
}

.reply-content {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
}

.reply-username {
  font-size: 24rpx;
  color: #666;
}

.reply-username.original-poster {
  color: #4ECDC4;
}

.reply-text {
  font-size: 24rpx;
  color: #333;
  line-height: 1.4;
}

.comment-input-bar {
  position: fixed;
  bottom: 100rpx;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx;
  padding-bottom: 44rpx;
  border-top: 1rpx solid #f0f0f0;
  z-index: 100;
}

.input-container {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.comment-input {
  flex: 1;
  height: 60rpx;
  background: #f5f5f5;
  border-radius: 30rpx;
  padding: 0 20rpx;
  font-size: 26rpx;
  color: #333;
}

.input-placeholder {
  color: #999;
}

.publish-btn {
  background: #4ECDC4;
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
}

.publish-text {
  color: #fff;
  font-size: 26rpx;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
  border-top: 1rpx solid #f0f0f0;
  z-index: 100;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.action-text {
  font-size: 22rpx;
  color: #666;
}
</style>
